<template>
  <a-card title="任务列表" :loading="loading">
    <a-form layout="inline" @submit.prevent>
      <a-form-item label="Assignee">
        <a-input v-model:value="filters.assignee" placeholder="EMP001" style="width:140px" />
      </a-form-item>
      <a-form-item label="Proc Def Key">
        <a-input v-model:value="filters.processDefinitionKey" placeholder="leaveApproval" style="width:160px" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="load">查询</a-button>
      </a-form-item>
    </a-form>
    <a-table :columns="columns" :data-source="tasks" row-key="id" size="small" :pagination="false" style="margin-top:12px" />
  </a-card>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { listTasks } from '../services/flowable';

const loading = ref(false);
const tasks = ref<any[]>([]);
const filters = ref({ assignee: '', processDefinitionKey: '' });

const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id' },
  { title: '名称', dataIndex: 'name', key: 'name' },
  { title: 'Assignee', dataIndex: 'assignee', key: 'assignee' },
  { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
  { title: '流程定义', dataIndex: 'processDefinitionId', key: 'processDefinitionId' },
  { title: '流程实例', dataIndex: 'processInstanceId', key: 'processInstanceId' }
];

async function load() {
  loading.value = true;
  try {
    tasks.value = await listTasks({
      assignee: filters.value.assignee || undefined,
      processDefinitionKey: filters.value.processDefinitionKey || undefined
    });
  } catch (e:any) {
    message.error(e.message || '加载失败');
  } finally {
    loading.value = false;
  }
}

load();
</script>
